import React from 'react';
import { Link } from 'react-router-dom';
import Logistics from '../CheckLogistics';
import CheckDetail from '../CheckDetail';
import Portal from '../Portal'
import './OrderDetail.less';


const returnBtn = ['申请售后','客服审核中','填写退货物流信息','','','退货完成','商家收到退货']

class OrderDetail extends React.PureComponent{
  constructor(props){
    super(props)
    this.state = {
      logisticsShow:false,
      CheckDetailShow:false,
      id:'',
    }
  }

  toProductDetail = (id,e) => {
    if (e.target.nodeName !== 'A') {
      __self.history.push(`/productDetail/${id}/buyProductDetail`)
    }
  }

  render(){
    const { type, item } = this.props;
    const { logisticsShow, CheckDetailShow,id } = this.state;
    const stateToLink = {
      '已发货':(item)=>(
        <div className="check-log" onClick={() => this.setState({ logisticsShow: true, id: item.order_id })}>查看物流&gt;&gt;</div>
      ),
      '待付款':(item)=>(
        <div className="check-log" onClick={() => this.props.toPay(item)}>付款&gt;&gt;</div>
      ),
      // '已完成':(item)=>(
      //   <Link className="check-log" to={{pathname:'/account/refund',state:item}}>
      //     申请售后&gt;&gt;
      //   </Link>
      // ),
    }
    return (
      <React.Fragment>

        {
          type === 'myorder' ?
            (
              <div className="order-detail">
                <div onClick={()=>this.setState({CheckDetailShow:true,id:item.order_id})} className="check-detail">查看详细&gt;&gt;</div>
                <p>订单号：<span>{item.order_no}</span></p>
                <p>状&nbsp;&nbsp;&nbsp;态：<span className="order-detail__state">{item.order_status_name}</span></p>
                <p>总&nbsp;&nbsp;&nbsp;价：<span className="price order-detail__price">￥{item.total_money}</span></p>
                {
                  item.productlist.map((pro,i,arr)=>(
                    <div
                      key={i}
                      className={`order-detail__product ${arr.length>1 ? 'pros': ''}`}
                      onClick={(e)=>this.toProductDetail(pro.product_id,e)}
                    >
                      <div className="order-detail__img">
                        <img src={pro.image} alt='' />
                      </div>
                      <div className="order-detail__title">
                        <p>
                          <span className="order-detail__brand">佳能</span>
                          {pro.title}
                        </p>
                        <div className="order-detail__num">{pro.quantity}件</div>
                        {
                          (item.order_status_name === '已完成' &&  Number(pro.quantity_can_return) > 0) ?
                            <Link className="check-log" to={{pathname:`/account/refundOrder/${item.order_id}/${i}`}}>申请售后&gt;&gt;</Link> : null
                        }
                      </div>
                    </div>
                  ))
                }
                {
                  (stateToLink[item.order_status_name] && stateToLink[item.order_status_name](item))
                }
              </div>
            ) : (
              <div className="order-detail">
                <p>订单号：<span>{item.order_no}</span></p>
                <p>状&nbsp;&nbsp;&nbsp;态：<span className="order-detail__state">{item.order_status_name}</span></p>
                <p>总&nbsp;&nbsp;&nbsp;价：<span className="price order-detail__price">￥{item.return_total_money}</span></p>
                <div className="order-detail__product" onClick={(e)=>this.toProductDetail(item.product_id,e)}>
                  <div className="order-detail__img">
                    <img src={item.image} alt='' />
                  </div>
                  <div className="order-detail__title">
                    <p>
                      <span className="order-detail__brand">佳能</span>
                      {item.title}
                    </p>
                    <div className="order-detail__num">{item.quantity}件</div>
                  </div>
                </div>
                {
                  <Link className="check-log" to={{pathname:`/account/refund/${item.order_id}`,state:item}}>
                    {
                      item.return_status_name
                    }&gt;&gt;
                  </Link>
                }
              </div>
            )
        }
        <Portal>
          <Logistics show={logisticsShow} id={id} LogisticsHide={()=>this.setState({logisticsShow:false})} />
        </Portal>
        <Portal>
          <CheckDetail show={CheckDetailShow} id={id} detailHide={()=>this.setState({CheckDetailShow:false})} />
        </Portal>
      </React.Fragment>

    )
  }

}
export default OrderDetail;
